<template>
	<view class="uniTask font14">
		<view class="flex alignCenter justConBetween infoBox">
			<view class="avatar flex alignCenter">
				<image :src="taskItem.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode=""></image>
				<text class="name font12 color666">{{taskItem.createUserName}}</text>
				<text class="font12 colorccc">{{taskItem.createTime}}</text>
			</view>
			<view class="" @click.stop="shareClick">
				<i class="iconfont icon-zhuanfa colorMain sharefont22"></i>
			</view>
		</view>
		<view class="flex alignCenter font14" @click.stop="toDetail">
			<image class="poster" :src="taskItem.cover"></image>
			<view class="taskCon flex justConBetween">
				<view class="title hiddenTwoline font14">{{taskItem.title}}</view>
				<!-- <view class="colorRed bold">5积分</view> -->
				<view class="flex alignCenter justConBetween">
					<view class="font12 color666"><text class="colorMain focusMargin">{{taskItem.checkInCount}}</text>人打卡</view>
					<view class="iconOper">
						<view class="flex alignCenter">
							<view class="noWidthBtn" @click.stop="taskOper('note')" v-if="(canNote && taskItem.state==1)">打卡</view>
							<view class="noWidthBtn" v-if="(isOwner && canEnd && taskItem.state!=2)" @click.stop="taskOper('end')">结束</view>
						</view>
						<!-- <image src="@/static/image/icons/edit.png" mode="widthFix"></image>
						<image src="@/static/image/icons/end.png" mode="widthFix" v-if="isOwner" @click.stop="taskOper('end')"></image> -->
						<!-- <uni-icons class="taskIcon" type="compose" size="20"></uni-icons>
						<uni-icons class="taskIcon" type="trash" size="20"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {endTask} from "@/api/send.js"
	import { navigateLoginPage } from "@/utils/common.js"
	export default {
		name:"uni-task",
		props:{
			taskItem:{
				type:Object,
				default(){
					return{}
				}
			},
			canNote:{
				type:Boolean,
				default:false
			},
			canEnd:{
				type:Boolean,
				default:true
			},
			groupId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				isOwner:false
			};
		},
		created() {
			this.isOwner=uni.getStorageSync('userId')==this.taskItem.createUserId
		},
		methods:{
			toNote(){
				uni.navigateTo({
					url:'/pages/mine/task/noteList/noteList'
				})
			},
			// 任务详情
			toDetail(){
				let groupId=this.groupId?this.groupId:''
				uni.navigateTo({
					url:'/pages/send/task/taskDetail/taskDetail?id='+this.taskItem.id+'&groupId='+groupId
				})
			},
			// 任务分享
			shareClick(){
				if(!uni.getStorageSync('token')){
					navigateLoginPage()
					return
				}
				// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
				let query={
					id:this.taskItem.id,
					inviteType:5,
					groupId:this.groupId
				}
				uni.navigateTo({
					url:'/pages/school/share/share?query='+JSON.stringify(query)
				})
			},
			// 任务操作
			taskOper(type){
				if(type=='end'){
					uni.showModal({
						title: '提示',
						content: '结束任务后，该任务将不会显示，活动参与人员将不能参与该任务的打卡，是否确认结束？',
						success:(res)=>{
							if (res.confirm) {
								endTask({id:this.taskItem.id}).then((res)=>{
									if(res.code==100000){
										this.$emit('opertask',type,this.taskItem)
									}
								})
								// this.$emit('opertask',type,this.taskItem)
							} else if (res.cancel) {}
						}
					});
					return
				}else if(type=='note'){
					let groupId=this.groupId?this.groupId:''
					uni.navigateTo({
						url:`/pages/send/question/question?from=task&id=${this.taskItem.id}&title=${this.taskItem.title}&type=note&groupId=${groupId}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.uniTask{
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
	// margin-bottom: 30rpx;
	border-bottom: 1px solid $bordercolor;
	border-radius: 10rpx;
	.infoBox{
		margin-bottom: 30rpx;
	}
	.avatar{
		image{
			width: 32rpx;
			height:32rpx;
			border-radius:50%;
		}
		.name{
			margin:0 14rpx 0 6rpx;
		}
	}
	.poster{
		width: 236rpx;
		height: 152rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
		border-radius: 20rpx;
	}
	.taskCon{
		flex:1;
		flex-direction: column;
		height: 152rpx;
	}
	.iconOper{
		// i{
		// 	display: inline-block;
		// 	margin-left: 30rpx;
		// }
		.taskIcon{
			margin-left: 30rpx;
		}
		image{
			width: 40rpx;
			height: 40rpx;
			margin:0 0 0 30rpx;
		}
		.noWidthBtn{
			padding:5rpx 30rpx;
			/* #ifdef APP-PLUS */
			padding:10rpx 30rpx;
			/* #endif */
			margin:0 0 0 15rpx;
			font-size: 24rpx;
		}
	}
}
</style>